<style type="text/css">
.news_list{
	height:300px;
	overflow:hidden;
}
.news_content{
	height:500px;
}
.scroll{
	display:none;
}
</style>

<div id="news_list">
	<div class="news_content">
        this is a list .<br/>
        wo have to know a lot of thinks.
	</div>                      
</div>
<div id="scroll">
	<div class="scroll_bar"></div>
	<div class="scroll_prev"></div>
	<div class="scroll_next"></div>          
</div>
<script type="text/javascript">

//为了方便，在选取对象过程中，我直接用了children[i]这种方法，如果大家的html有变化的话，需要改动里面的i值

function scroll(id,id2){
    var obj=document.getElementById(id);
    var list=document.getElementById(id2);
    list.scrollTop=0;
    var oUl=list.children[0];
    var bar=obj.getElementsByTagName("div")[0];
    var prev=obj.getElementsByTagName("div")[1];
    var next=obj.getElementsByTagName("div")[2];
    if(oUl.offsetHeight>list.offsetHeight){
        obj.style.display='block';
        list.style.overflowY='scroll';
        //按比例设置滚动条长度
        bar.style.height=Math.floor(obj.offsetHeight*list.offsetHeight/oUl.offsetHeight)+'px';
        bar.style.overflow='hidden';
        //拖拽滚动条事件加载
        bar.onmousedown=function(ev){
            var o=this;
            var oEvent=ev||event;
            var y=oEvent.clientY-this.offsetTop;
            document.onmousemove=function(ev){
                oEvent=ev||event;
                var otop=oEvent.clientY-y;
                var stop=otop*oUl.offsetHeight/obj.offsetHeight;
                if(otop<=0){
                    o.style.top=0+'px';
                    list.scrollTop=0;
                }else if(otop>=obj.offsetHeight-bar.offsetHeight){
                    o.style.top=obj.offsetHeight-bar.offsetHeight+'px';
                    list.scrollTop=oUl.offsetHeight-list.offsetHeight;
                }else{
                    o.style.top=otop+'px';
                    list.scrollTop=stop;
                }
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
        }
        //向上按钮事件加载
        prev.onmousedown=function(){
            if(bar.offsetTop>0){
                var move=setInterval(function(){
                    if(bar.offsetTop-obj.offsetHeight*0.02>0){
                        bar.style.top=bar.offsetTop-obj.offsetHeight*0.02+'px';
                        list.scrollTop=list.scrollTop-oUl.offsetHeight*0.02;
                    }else{
                        clearInterval(move);
                        bar.style.top=0+'px';
                        list.scrollTop=0;
                    }
                },100);
                prev.onmouseup=function(){clearInterval(move);}
            }
        }
        //向下按钮事件加载
        next.onmousedown=function(){
            if(bar.offsetTop<obj.offsetHeight-bar.offsetHeight){
                var move=setInterval(function(){
                    if(bar.offsetTop+obj.offsetHeight*0.02<obj.offsetHeight-bar.offsetHeight){
                        bar.style.top=bar.offsetTop+obj.offsetHeight*0.02+'px';
                        list.scrollTop=list.scrollTop+oUl.offsetHeight*0.02;
                    }else{
                        clearInterval(move);
                        bar.style.top=obj.offsetHeight-bar.offsetHeight+'px';
                        list.scrollTop=oUl.offsetHeight-list.offsetHeight;
                    }
                },100);
                next.onmouseup=function(){clearInterval(move);}
            }
        }
        //鼠标滚轮事件加载
        list.onscroll=function(){
            bar.style.top=list.scrollTop*obj.offsetHeight/oUl.offsetHeight+'px';
        }
    }
}

scroll("scroll","news_list");
</script>